<template>
    <el-card>
        <template #header>
            <el-text size="large">个人资料</el-text>
        </template>
        <el-form class="info-form" style="width: 30%" :model="form" label-width="90">
            <el-form-item label="头像">
                <ym-upload v-model="form.avatar" name="image" shape="square">
                    <div>更换头像</div>
                </ym-upload>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickname" />
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.username" disabled />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保 存</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
    import { getUserInfo } from '@/api/base'
    import { updateProfile } from '@/api/base'
    import YmUpload from '@/components/ymi/ymiUpload.vue'
    import { useUserStore } from '@/stores/user'
    const userStore = useUserStore()
    // import YmWangeditor from '@/components/ymi/ym-wangeditor.vue'
    const form = ref({
        avatar: '',
        nickname: '',
        username: '',
        phone: '',
        email: ''
    })

    onMounted(async () => {
        await userStore.fetchUserInfo()
        form.value = { ...(userStore.userInfo as any) }
    })
    const onSubmit = () => {
        updateProfile(form.value).then((res) => {
            userStore.fetchUserInfo()
            ElMessage.success('保存成功')
        })
    }
</script>

<style lang="scss" scoped>
    .info-form {
        .el-form-item {
            margin-bottom: 40px;
        }
    }
</style>
